<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.sinodata.bsm.common.vo.*"%>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    List<Attribute> attributes = (List<Attribute>) request.getAttribute("attributes");
    Map<Long, String> map = (Map<Long, String>) request.getAttribute("attVals");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>综合性能页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<%@ include file="../include/common.jsp"%>
<%@ include file="../include/form.jsp"%>
<%@ include file="../include/table.jsp"%>
<%@ include file="../include/tree.jsp"%>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js" ></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js" ></script>


<script type="text/javascript">
	$(document).ready(function() {
		initLoadChart();
		initCpuList();
		initMem();
		initDiskList();
		initNetwork();
		initTCP();
	});
	

	var jsonData={
		    "chart": {
		        "upperlimit": "100",
		        "lowerlimit": "0",
		        "chartLeftMargin":'0',
		        "chartRightMargin" :'0',
		        "chartTopMargin" :'0',
		        "chartBottomMargin" :'0',
		        "showTickMarks":"0",
		        "showTickValues":"0",
			    "showValue":"0"
		    },
		    "colorrange": {
		        "color": [
		            {
		                "minvalue": "0",
		                "maxvalue": "20",
		                "code": "00dd00"
		            }
		        ]
		    },
		    "value": "45",
		    "styles": {
			    
		    }
		};

    //初始化主机基本信息图表 
	function initLoadChart(){
		$("#loadChartDiv").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/SplineArea.swf",
			dataSource : "${pageContext.request.contextPath}/resources/charts/Data_lineArea.xml",
			dataFormat : "xmlurl",
			width : "100%",
			height : "100%",
			id : "loadChart"
		});
		$("#load1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "load1Chart"
		});
		$("#load5").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "load5Chart"
		});
		$("#load15").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "load15Chart"
		});
    }


    var cpuListData= [["cpu0 类型 主频","1%","2%","3%","90%"],
                      ["cpu1 类型 主频","1%","2%","3%","90%"],
                      ["cpu2 类型 主频","1%","2%","3%","90%"],
                      ["cpu3 类型 主频","1%","2%","3%","90%"]
        ];
	//初始化CPU列表
    function initCpuList(){
    	$("#cpuList").dataTable({
			"bProcessing": true, 
			"sAjaxSource":'real-time!getChildResInfo.action?resid=<%=resid %>&childType=1201010100000&valueid='+valueid,
			"bServerSide": true,
			"sServerMethod": 'POST',
			"bPaginate":false,
			"bSort": true,
			"bFilter":false,
			"sPaginationType": 'full_numbers',
			"aoColumns":[
			{"mDataProp":"name","bSortable": false},
			{"mDataProp":"attr_120101000000003" },
			{"mDataProp":"attr_120101000000001","bSortable": false},
			{"mDataProp":"prop_120101000000001","bSortable": false},
			{"mDataProp":"prop_120101000000002","bSortable": false},
			{"mDataProp":"prop_120101000000003","bSortable": false},
			{"mDataProp":"prop_120101000000004","bSortable": false}
		     ],
			 "oLanguage": { 
						"sZeroRecords": "dd",
						"sInfo":"",
						"sInfoEmpty": ""
		      }
	     });
        $("#cpu1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "cpu1Chart"
		});
		$("#cpu2").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "cpu2Chart"
		});
		$("#cpu3").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "cpu3Chart"
		});
		$("#cpu4").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "cpu4chart"
		});
    }


    //内存初始化
    function initMem(){
    	$("#memChartDiv").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/MSSpline.swf",
			dataSource : "${pageContext.request.contextPath}/resources/charts/Data_MSSpline.xml",
			dataFormat : "xmlurl",
			width : "100%",
			height : "100%",
			id : "memChart"
		});
    	$("#mem1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "mem1Chart"
		});
		$("#mem2").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "mem2Chart"
		});
    }

    
 
   
    


    var diskListData= [["文件系统名","挂载点"," 所属逻辑卷设备","大小","使用率"],
                       ["文件系统名","挂载点"," 所属逻辑卷设备","大小","使用率"],
                       ["文件系统名","挂载点"," 所属逻辑卷设备","大小","使用率"],
                       ["文件系统名","挂载点"," 所属逻辑卷设备","大小","使用率"]
                       ];
  //磁盘初始化
    function initDiskList(){
    	var html="";
        for (var key in diskListData){
            var row = diskListData[key];
            html+="<li><span class='aaa'>"+row[0]+"</span><span class='aaa'>"+row[1]+"</span><span class='aaa'>"+row[2]+"</span><span class='aaa'>"+row[3]+"</span><span class='aaa'>"+row[4]+"</span></li>";
        }
        $("#diskListDiv").html(html);
    	$("#diskChartDiv").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/MSSpline.swf",
			dataSource : "${pageContext.request.contextPath}/resources/charts/Data_MSSpline.xml",
			dataFormat : "xmlurl",
			width : "100%",
			height : "100%",
			id : "diskChart"
		});
    	$("#disk1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "disk1Chart"
		});
		$("#disk2").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "disk2Chart"
		});
    }

    //网络初始化
    function initNetwork(){
    	$("#networkChartDiv").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/MSSpline.swf",
			dataSource : "${pageContext.request.contextPath}/resources/charts/Data_MSSpline.xml",
			dataFormat : "xmlurl",
			width : "100%",
			height : "100%",
			id : "networkChart"
		});
    	$("#network1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "network1Chart"
		});
		$("#network2").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "network2Chart"
		});
    }

   
  //TCP初始化
    function initTCP(){
    	 var tcpPortData = [
   		           		 {"name":"tomcat6.0","port":"8080","status":"Established"}
   		                      
            				];
            
   		$("#tcpPortTable").dataTable({
   			"bProcessing": true, 
   			"aaData": tcpPortData,
   			"bPaginate":false,
   			"bSort": true,
   			"bFilter":false,
   			"sPaginationType": 'full_numbers',
   			"aoColumns":[
   				{"mDataProp":"name","bSortable": false},
   				{"mDataProp":"port","bSortable": false},
   				{"mDataProp":"status","bSortable": false}
   			],
   			"oLanguage":{
   				"sZeroRecords": "没有找到记录",
   				"sInfo":"",
   				"sInfoEmpty": ""
   			}
   		});
   		

        
    	$("#tcpChartDiv").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/MSSpline.swf",
			dataSource : "${pageContext.request.contextPath}/resources/charts/Data_MSSpline.xml",
			dataFormat : "xmlurl",
			width : "100%",
			height : "100%",
			id : "tcpChart"
		});
    	$("#tcp1").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "tcp1Chart"
		});
		$("#tcp2").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "tcp2Chart"
		});
		$("#tcp3").insertFusionCharts({
			swfUrl : "${pageContext.request.contextPath}/resources/charts/VLED.swf",
			dataSource : jsonData,
			dataFormat : "json",
			width : "100%",
			height : "100%",
			id : "tcp3Chart"
		});

		
    }

</script>

</head>
<body>
		<div class="column">
		<!--标题--------------->	
		<div class="col-t-h">
			<h2 class="col-h2">基本信息</h2>
			<ul class="col-t-ul">
				<li><span>平均负载</span><span>一分钟</span><span id="load1">load1</span><span>5%</span></li>
				<li><span>五分钟</span><span id="load5">load5</span><span>5%</span></li>
				<li><span>十五分钟</span><span id="load15">load15</span><span>5%</span></li>
			</ul>
			
		</div>
		<!--@end标题-->
		
		<div class="col-main">
			<!--基本信息-->	
			<div class="col-l-extra">
				<ul class="col-l-ul">
					<li><span class="col-l-ul-l">OS类型：</span><span class="col-l-ul-r">Linux</span></li>
					<li><span class="col-l-ul-l">主机名：</span><span class="col-l-ul-r">生产服务器</span></li>
					<li><span class="col-l-ul-l">IP：</span><span class="col-l-ul-r">172.168.21.86</span></li>
					<li><span class="col-l-ul-l">OS版本：</span><span class="col-l-ul-r">2.6.4.1-29.el5-x86_98</span></li>
					<li><span class="col-l-ul-l">主机型号：</span><span class="col-l-ul-r">x86_98</span></li>
					<li><span class="col-l-ul-l">主机当前时间：</span><span class="col-l-ul-r">16：22：56</span></li>
					<li><span class="col-l-ul-l">主机运行时间：</span><span class="col-l-ul-r">12天</span></li>
				</ul>
			
			</div>
			<!--@end基本信息-->	
			
			<!--图表-->	
			<div class="col-r-main">
				<div id="loadChartDiv"></div>
			</div>
			
			<!--@end图表-->	
		</div>
</div>		
		
		
		
	    <div class="column">
			<!--标题Cpu-->	
			<div class="col-t-h">
				<h2 class="col-h2">CPU</h2>
				<ul class="col-t-ul">
					<li><span>系统调用率</span><span id="cpu1">load1</span><span>5%</span></li>
					<li><span>用户使用率</span><span id="cpu2">load5</span><span>5%</span></li>
					<li><span>等待IO率</span><span id="cpu3">load15</span><span>5%</span></li>
					<li><span>空闲率</span><span id="cpu4">load15</span><span>5%</span></li>
				</ul>
				
			</div>
			<!--@end标题-->
			<div class="col-main">
				<!--CPU-->	
				<div class="aaa">
					<ul id="cpuListDiv">
					</ul>
				
				</div>
				<!--@end基本信息-->	
				
				
				
				
			</div>
        </div>
        
        <div class="column">
			<!--标题-->	
			<div class="col-t-h">
				<h2 class="col-h2">内存</h2>
				<ul class="col-t-ul">
					<li><span>物理内存使用率</span><span id="mem1">mem1</span><span>5%</span></li>
					<li><span>虚拟内存使用率</span><span id="mem2">mem2</span><span>5%</span></li>
				</ul>
				
			</div>
			<!--@end标题-->
			
			<div class="col-main">
				<div class="col-l-extra">
					<ul class="col-l-ul">
						<li><span class="col-l-ul-l">内存大小:</span><span class="col-l-ul-r">2048M</span></li>
						<li><span class="col-l-ul-l">内存页大小:</span><span class="col-l-ul-r">512K</span></li>
						<li><span class="col-l-ul-l">内存页出数:</span><span class="col-l-ul-r">1321k/s</span></li>
						<li><span class="col-l-ul-l">内存页入数:</span><span class="col-l-ul-r">2.6.4.1-29.el5-x86_98</span></li>
						<li><span class="col-l-ul-l">SWAP大小:</span><span class="col-l-ul-r">x86_98</span></li>
					</ul>
				
				</div>
				<!--@end基本信息-->	
				
				<!--图表-->	
				<div class="col-r-main">
					<div id="memChartDiv"></div>
				</div>
				
				<!--@end图表-->	
		</div>
</div>		
		
		
		 <div class="column">
			<!--标题-->	
			<div class="col-t-h">
				<h2 class="col-h2">磁盘</h2>
				<ul class="col-t-ul">
					<li><span>读</span><span id="disk1">disk1</span><span>5%</span></li>
					<li><span>写</span><span id="disk2">disk2</span><span>5%</span></li>
				</ul>
				
			</div>
			<!--@end标题-->
			
			<div class="col-main">
				<!--基本信息-->	
				<div class="col-l-extra">
					<ul class="col-l-ul">
						<li><span class="col-l-ul-l">磁盘使用率:</span><span class="col-l-ul-r">2048M</span></li>
						<li><span class="col-l-ul-l">索引节点使用率:</span><span class="col-l-ul-r">512K</span></li>
						<li><span class="col-l-ul-l">已用索引节点数:</span><span class="col-l-ul-r">1321k/s</span></li>
						<li><span class="col-l-ul-l">当前打开连接数:</span><span class="col-l-ul-r">2.6.4.1-29.el5-x86_98</span></li>
						<li><span class="col-l-ul-l">SWAP大小:</span><span class="col-l-ul-r">x86_98</span></li>
					</ul>
				</div>
				<!--@end基本信息-->	
				
				<!--图表-->	
				<div class="col-r-main  m-b-8">
					<div id="diskChartDiv"></div>
				</div>
				
				<!--@end图表-->
				<div class="aaa">
					<ul id="diskListDiv" >
					</ul>
				
				</div>	
		</div>
</div>		
				
		
		<div class="column">
			<!--标题-->	
			<div class="col-t-h">
				<h2 class="col-h2">网络</h2>
				<ul class="col-t-ul">
					<li><span>发送</span><span id="network1" >network1</span><span>5%</span></li>
					<li><span>接收</span><span id="network2">network2</span><span>5%</span></li>
				</ul>
				
			</div>
			<!--@end标题-->
			
			<div class="col-main">
				<div class="col-l-extra">
					<ul class="col-l-ul">
						<li><span class="col-l-ul-l">发送包:</span><span class="col-l-ul-r">2048M</span></li>
						<li><span class="col-l-ul-l">接收包:</span><span class="col-l-ul-r">512K</span></li>
						<li><span class="col-l-ul-l">丢包率:</span><span class="col-l-ul-r">1321k/s</span></li>
						<li><span class="col-l-ul-l">输入量总和:</span><span class="col-l-ul-r">2.6.4.1-29.el5-x86_98</span></li>
						<li><span class="col-l-ul-l">输出量总和:</span><span class="col-l-ul-r">x86_98</span></li>
						<li><span class="col-l-ul-l">输入错误量总和:</span><span class="col-l-ul-r">2.6.4.1-29.el5-x86_98</span></li>
						<li><span class="col-l-ul-l">输出错误量总和:</span><span class="col-l-ul-r">x86_98</span></li>
					</ul>
				
				</div>
				<!--@end基本信息-->	
				
				<!--图表-->	
				<div class="col-r-main">
					<div id="networkChartDiv"></div>
				</div>
				
				<!--@end图表-->	
		</div>
</div>		
				
		
		
		<div class="column">
			<!--标题-->	
			<div class="col-t-h">
				<h2 class="col-h2">TCP连接</h2>
				<ul class="col-t-ul">
					<li><span>打开数</span><span id="tcp1">tcp1</span><span>5%</span></li>
					<li><span>Time_Wait</span><span id="tcp2">tcp2</span><span>5%</span></li>
					<li><span>Close_Wait</span><span id="tcp3">tcp3</span><span>5%</span></li>
				</ul>
				
			</div>
			<!--@end标题-->
			
			<div class="col-main">
				<div class="col-l-extra">
					<table width="100%" height="100%" id="tcpPortTable" cellpadding="0" cellspacing="0" border="0" class="display"  >
						 <thead>
			    	 		<tr>
			    	 			<th width="25%">端口名</th>
			    	 			<th width="25%">端口号</th>
			    	 			<th width="50%">状态</th>
			    	 		</tr>
			    	 	</thead>  
			    	 </table>
				</div>
				<!--@end基本信息-->	
				
				<!--图表-->	
				<div class="col-r-main">
					<div id="tcpChartDiv"></div>
				</div>
				
				<!--@end图表-->	
		</div>
</div>		
				
</body>
</html>